<template>
  <div class="questionCard" @click="goDetail">
    <span class="title">{{ questionTitle }}</span>
    <div class="content">
      {{ preView | ellipsis }}
    </div>
    <div class="footer">
      上传时间：{{ createdAt }} <span class="type">{{ questionType }}</span>
      <span class="looknum">浏览量：{{ lookNum }}</span>
      <button v-if="deleteBtn" @click.stop="deleteArticle" class="deleteBtn">
        删除文章
      </button>
    </div>
    <div @click.stop="">
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :show-close="false"
      >
        <span>是否确认删除</span>
        <span slot="footer" class="dialog-footer">
          <el-button class="dialog-btn" @click="notSure"> 取 消 </el-button>
          <el-button class="dialog-btn" type="primary" @click="sure">
            确 定
          </el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { deleteArticle } from '@/api/api'
export default {
  inject: ['routerRefresh'],
  name: 'QuestionCard',
  // props: [
  //   "questionTitle",
  //   "questionAnswer",
  //   "questionType",
  //   "createdAt",
  //   "id",
  //   "lookNum",
  //   "preView",
  //   "deleteBtn",
  // ],
  props: {
    questionTitle: {
      type: String
    },
    questionAnswer: {
      type: String
    },
    questionType: {
      type: String
    },
    createdAt: {
      type: String
    },
    id: {
      type: Number
    },
    preView: {
      type: String
    },
    lookNum: {
      type: Number
    },
    deleteBtn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  filters: {
    // 显示文章预览50字
    ellipsis(value) {
      const strValue = String(value)
      if (strValue.length > 50) {
        return strValue.slice(0, 50) + '. . . . . .'
      }
      return value
    }
  },
  methods: {
    goDetail() {
      this.$emit('goDetail', this.id)
    },
    deleteArticle() {
      this.dialogVisible = true
    },
    notSure() {
      this.dialogVisible = false
    },
    sure() {
      deleteArticle({ id: this.id }).then((res) => {
        console.log(res)
        this.dialogVisible = false
        this.routerRefresh()
      })
      console.log('object')
    }
  }
}
</script>

<style lang="scss" scoped>
.questionCard {
  margin: 6px 0;
  padding: 20px;
  background-color: #fff;
  cursor: pointer;
  &:hover {
    .title {
      color: #00aae6;
      transition: color 0.5s;
    }
  }
  .title {
    font-size: 18px;
    letter-spacing: 1px;
  }
  .content {
    font-size: 16px;
    color: #666;
    margin-top: 20px;
  }
  .footer {
    margin-top: 14px;
    font-size: 14px;
    color: #999;
    .type {
      margin-left: 20px;
    }
    .looknum {
      margin-left: 20px;
    }
    .deleteBtn {
      float: right;
      margin-left: 20px;
      border: 0;
      padding: 4px;
      cursor: pointer;
      font-size: 10px;
      color: red;
    }
  }
}
.dialog-btn {
}
</style>